<template>
  <div>
    <el-card class="boox-card">
      <el-button type="primary" @click="dialogFormVisible = true">志愿活动发布</el-button>
      <!----------添加活动内容-->
      <el-dialog title="活动详情" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-position="left" label-width="120px">

           <el-form-item label="活动名称">
                 <el-input v-model="form.vname"></el-input>
           </el-form-item>

          <el-form-item label="具体介绍">
                 <el-input type="textarea" v-model="form.task"></el-input>
          </el-form-item>

          <el-form-item label="活动地点">
                <el-input v-model="form.vspot"></el-input>
          </el-form-item>

          <el-form-item label="活动时间">
                <el-input v-model="form.activitytime"></el-input>
          </el-form-item>

  

           <el-form-item label="报名开始时间">
                <el-input v-model="form.starttime"></el-input>
            </el-form-item>
          <el-form-item label="报名截止时间">
                <el-input v-model="form.deadline"></el-input>
          </el-form-item>
          <el-form-item label="招募人数">
                <el-input v-model="form.headcount"></el-input>
          </el-form-item>
          <el-form-item label="志愿时长">
                <el-input v-model="form.vtime"></el-input>
          </el-form-item>
          <el-form-item label="活动报酬">
                <el-input v-model="form.reward"></el-input>
          </el-form-item>

          <el-form-item label="活动发布者编号">
                <el-input v-model="form.pubid"></el-input>
          </el-form-item>

          <el-form-item>
    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
    <el-button @click="dialogFormVisible = false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
<div>

</div>
    <el-table  :data="activityList" border stripe>
      <el-table-column type="index>"></el-table-column>
      <el-tableColumn label="活动名称" prop="vname"></el-tableColumn>
      <el-tableColumn label="活动地点" prop="vspot"></el-tableColumn>
      <el-tableColumn label="活动时间" prop="activitytime"></el-tableColumn>
      <el-tableColumn label="招募人数" prop="headcount"></el-tableColumn>
      <el-tableColumn label="志愿时长" prop="vtime"></el-tableColumn>
      <el-tableColumn label="操作" with="180px">
        <template slot-scope="scope">
         <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.vno)"></el-button>
         <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeActivityById(scope.row.vno)"></el-button>
        </template>
      </el-tableColumn>



    </el-table>
    </el-card>
    <!--------修改活动对话框-->
    <el-dialog title="修改活动" :visible.sync="editDialogVisible" width="50%">
      <el-form ref="editActivityFormRef" :model="editActivityForm" @close="editDialogClosed" label-position="left" label-width="120px">

<el-form-item label="活动名称" prop="vname">
      <el-input v-model="editActivityForm.vname"></el-input>
</el-form-item>

<el-form-item label="具体介绍" prop="task">
      <el-input type="textarea" v-model="editActivityForm.task"></el-input>
</el-form-item>

<el-form-item label="活动地点" prop="vspot">
     <el-input v-model="editActivityForm.vspot"></el-input>
</el-form-item>

<el-form-item label="活动时间" prop="activitytime">
     <el-input v-model="editActivityForm.activitytime"></el-input>
</el-form-item>



<el-form-item label="报名开始时间" prop="starttime">
     <el-input v-model="editActivityForm.starttime"></el-input>
 </el-form-item>
<el-form-item label="报名截止时间" prop="deadline">
     <el-input v-model="editActivityForm.deadline"></el-input>
</el-form-item>
<el-form-item label="招募人数" prop="headcount">
     <el-input v-model="editActivityForm.headcount"></el-input>
</el-form-item>
<el-form-item label="志愿时长" prop="vtime">
     <el-input v-model="editActivityForm.vtime"></el-input>
</el-form-item>
<el-form-item label="活动报酬" prop="reward">
     <el-input v-model="editActivityForm.reward"></el-input>
</el-form-item>

<el-form-item label="活动发布者编号" prop="pubid">
     <el-input v-model="editActivityForm.pubid"></el-input>
</el-form-item>

<el-form-item>
<el-button type="primary" @click="editActivityInfo">确定</el-button>
<el-button @click="editDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
         activityList:[],    
         dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          vname: '',
          task: '',
          vspot: '',
          activitytime: '',
          starttime: '',
          deadline: '',
          headcount:'',
          vtime:'',
          reward:'',
          pubid:'',
    },
    //控制修改活动对话框的显示与隐藏
    editDialogVisible:false,
    //修改活动的表单数据
    editActivityForm:{},

    }
  },
  created(){
    this.getActivityList()
  },
  methods: {
    onSubmit(form) {
        this.$refs[form].validate((valid) => {
        this.loading = true;  // 提交按钮显示加载动画
        if (valid) {
          let _this = this;
          this.axios({     // axios 向后端发起请求
            url: "/api/volunteering/save",  // 请求地址
            method: "post",             // 请求方法
            headers: {                  // 请求头
              "Content-Type": "application/json",
            },
            data: { // 请求参数，为 data，与登录的 params 不太一样
              vname: _this.form.vname,
              task: _this.form.task,
              vspot:_this.form.vspot,
              activitytime:_this.form.activitytime,
              starttime:_this.form.starttime,
              deadline:_this.form.deadline,
              headcount:_this.form.headcount,
              vtime:_this.form.vtime,
              reward:_this.form.reward,
              pubid:_this.form.pubid,
            },
          }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
            if (res.data.code === '0') {  // 当响应的编码为 0 时，说明注册成功
              // 显示后端响应的成功信息
              this.$message({
                message: res.data.msg,
                type: "success",
              });
            }else{  // 当响应的编码不为 0 时，说明注册失败
              // 显示后端响应的失败信息
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
            // 不管响应成功还是失败，收到后端响应的消息后就不再让登录按钮显示加载动画了
            _this.loading = false;
            console.log(res);
          });
        } else { // 如果账号或密码有一个没填，就直接提示必填，不向后端请求
          console.log("error submit!!");
          this.loading = false;
          return false;
        }
      });
    },
     getActivityList(){
     
                //2.使用axios发送ajax请求
                //axios.提交方式(“请求s接口路径”).then(箭头函数).catch(箭头函数|)
                var url="/api/volunteering/list"
                this.axios.get(url)
                  .then(response=>{
                      //response就是请求后返回的数据，response可以任意取名
                      // console.log(response)
                      //通过response获取具体数据，赋值给定义空数组
                      if(response.data.code == 0){
                      this.activityList = response.data.data
                  } else {
                      alert(response.data.msg)
                  }
                      this.activityList=response.data.data
                      console.log(this.activityList)
                      
                  })//请求成功执行then方法
                  .catch(error=>{
                      alert(error);
                     
                  })//请求失败执行catch方法
            },
            showEditDialog(vno){
      

                
      this.axios({
        url:"/api/volunteering/detail",
        method:"get",
        headers: {                  // 请求头
  "Content-Type": "application/json",
},
params: { // 请求参数，为 data，与登录的 params 不太一样
  vno:vno,
},
      })
        .then(response=>{
            //response就是请求后返回的数据，response可以任意取名
            // console.log(response)
            //通过response获取具体数据，赋值给定义空数组
            if(response.data.code == 0){
            this.editDialogVisible=true
            this.editActivityForm = response.data.data
        } else {
            alert(response.data.msg)
        }
            this.activityList=response.data.data
            console.log(vno)
            
        })//请求成功执行then方法
        .catch(error=>{
            alert(error);
           
        })//请求失败执行catch方法
  },
editDialogClosed(){
    this.$refs.editActivityFormRef.resetFields()
  },
editActivityInfo(vno){
    this.$refs.editActivityFormRef.validate((valid)=>{
      if (valid) {
let _this = this;
this.axios({     // axios 向后端发起请求
  url: "/api/volunteering/update",  // 请求地址
  method: "put",             // 请求方法
  headers: {                  // 请求头
    "Content-Type": "application/json",
  },
  
  data: { // 请求参数，为 data，与登录的 params 不太一样
    vno:vno,
    vname: _this.form.vname,
    task: _this.form.task,
    vspot:_this.form.vspot,
    activitytime:_this.form.activitytime,
    starttime:_this.form.starttime,
    deadline:_this.form.deadline,
    headcount:_this.form.headcount,
    vtime:_this.form.vtime,
    reward:_this.form.reward,
    pubid:_this.form.pubid,
  },
})
  }
  this.editDialogVisible=false
  this.getActivityList()
  this.$message.success('更新活动信息成功！')
})
},

  removeActivityById(vno){

    this.$confirm(
      '此操作将永久删除该志愿活动，是否继续？',
      '提示',
      {confirmButtonText:'确定',
    cancelButtonText:'取消',
  type:"warning",}
    ).then(()=>{
      this.axios({     // axios 向后端发起请求
            url: "/api/volunteering/delete"+vno,  // 请求地址
            method: "delete",             // 请求方法
            headers: {                  // 请求头
              "Content-Type": "application/json",
            },
            data: { // 请求参数，为 data，与登录的 params 不太一样
              vname: this.form.vname,
              task: this.form.task,
              vspot:this.form.vspot,
              activitytime:this.form.activitytime,
              starttime:this.form.starttime,
              deadline:this.form.deadline,
              headcount:this.form.headcount,
              vtime:this.form.vtime,
              reward:this.form.reward,
              pubid:this.form.pubid,
            },
          })
        .then((response) => {
          if(response.data.code==0)
          console.log("Delete Successfully"), 
          this.getActivityList()
        })

   
    
  })
  },
}}
  
</script>

<style lang="less" scoped>
</style>